<!--
 * hi-gap - 间隔
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-gap" :class="_classes" :style="_styles"></view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // props
    const _props = defineProps(props);

    // classes
    const _classes = computed(() => {
        const classes = [];

        // 是否是负数
        if (parseInt(_props.size) < 0) classes.push("hi-gap--negative");

        // 行内模式
        if (_props.inline) classes.push("hi-gap--inline");

        return classes;
    });

    // styles
    const _styles = computed(() => {
        const styles = [];

        // 高度
        if (_props.size) styles.push(`--hi-gap-size: ${_props.size};`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-gap {
        width: var(--hi-gap-size, 0);
        height: var(--hi-gap-size, 12px);

        &--negative {
            width: var(--hi-gap-size, 0);
            height: var(--hi-gap-size, 0);
            margin-top: var(--hi-gap-size, 0);
        }

        &--inline {
            display: var(--hi-gap-display, inline-block);
            width: var(--hi-gap-size, 12px);
            height: var(--hi-gap-size, 0);

            &.hi-gap--negative {
                margin-left: var(--hi-gap-size, 0);
            }
        }
    }
</style>
